<template>
    
  <NavBar />
  <div class="background">
    <userinfo></userinfo>
    <div class="img">    
    <div class="container">     

      <a-card title="personal information" class="form-card">
          <a-form
              :model="form"
              layout="vertical"
              @finish="onSubmit"
          >
              <a-form-item
                  label="name"
                  name="name"
                  :rules="[{ required: true, message: 'please input your name' }]"
              >
                  <a-input v-model:value="form.name" disabled />
              </a-form-item>

              <a-form-item
                  label="address"
                  name="address"
                  :rules="[{ required: true, message: 'please input your address' }]"
              >
                  <a-textarea
                      v-model:value="form.address"
                      placeholder="please input your address"
                      :rows="3"
                  />
              </a-form-item>

              <!-- <a-form-item
                  label="email"
                  name="email"
                  :rules="[
                      { required: true, message: 'please input your email' },
                      { type: 'email', message: 'please input a valid email address' }
                  ]"
              >
                  <a-input
                      v-model:value="form.email"
                      placeholder="please input your email"
                  />
              </a-form-item> -->

              <a-form-item
                  label="phone number"
                  name="phone"
                  :rules="[
                      { required: true, message: 'please input your phone number' },
                      { pattern: /^1[3-9]\d{9}$/, message: 'please input a valid phone number' }
                  ]"
              >
                  <a-input
                      v-model:value="form.phone"
                      placeholder="please input your phone number"
                  />
              </a-form-item>

              <a-form-item>
                  <a-button
                      type="primary"
                      html-type="submit"
                      block
                  >
                      save information
                  </a-button>
              </a-form-item>
          </a-form>
      </a-card>
  </div>
  </div>
  </div>
</template>

<script>
import userinfo from '@/components/UserInfo.vue';
import NavBar from '@/components/NavBar.vue';
import store from '@/store';
import { ref } from 'vue';
import { Card, Form, Input, Button } from 'ant-design-vue';
import router from '@/router';
import axios from 'axios';
export default {
  components: {
      userinfo,
      NavBar,
      'a-card': Card,
      'a-form': Form,
      'a-form-item': Form.Item,
      'a-input': Input,
      'a-textarea': Input.TextArea,
      'a-button': Button,
  },
  setup() {
    
    if(store.state.user.username == null){
      alert('please login first');
      router.push('/userLogin');
    }
    
      const form = ref({
          name: store.state.user.username,
          address: '',
        //   email: '',
          phone: ''
      });
      const getUserInfo = async () => {
        const res = await axios.get(`http://localhost:8080/getUserContact?username=${store.state.user.username}`);
        console.log(res);
        form.value.address = res.data.data.address;
        form.value.phone = res.data.data.telephone;
      }
      getUserInfo();
      const onSubmit = () => {
          // 这里可以添加API调用
          axios.post(`http://localhost:8080/updateUserContact?${'username='+form.value.name}&${'telephone='+form.value.phone}&${'address='+form.value.address}`, ).then(res => {
            console.log(res);
          }).then(()=>{
            alert('update success');
            getUserInfo();
          }).catch(err => {
            alert('update failed');
            console.log(err);
          });
      };

      const user = store.state.user.username;
      if (!user) {
          alert('请先登录');
          // 这里需要router实例，可以通过inject或从setup参数获取
      }

      return {
          form,
          onSubmit,
          user
      };
  }
};
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 0 20px;
}

.form-card {
  margin-top: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.background {
    width: 100vw;  /* 100% 视口宽度 */
    height: 100vh; /* 100% 视口高度 */
    margin: 0;     /* 去除默认边距 */
  padding: 0;    /* 去除默认内边距 */
  background-size: 100% 100%; /* 强制拉伸填满（可能变形） */
  background-repeat: no-repeat;
  background-image: url('../assets/images/image1.png');
}
.img {
    
    width: 100%;   /* 宽度填满盒子 */
  height: 100%;  /* 高度填满盒子 */
 
}
</style>